<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: boBrother
 * @LastEditTime: 2022-01-06 19:42:19
-->
<template>
  <div id="left_2_container" style="height: 90%">
    <!-- {{onlineNumber[1].type}} -->
  </div>
</template>


<script>
import { get } from "@/utils/request.js";
import { Pie } from "@antv/g2plot";
export default {
  data() {
    return {
      onlineNumber: [],
      chart: null,
    };
  },
  computed: {
    chartData() {
      return this.onlineNumber.map((item) => {
        return {
          type: item.type + "设备",
          value: item.value,
        };
      });
    },
  },
  methods: {
    initChart() {
      if (this.chart) {
        this.chart.destroy();
      }
      this.chart = new Pie("left_2_container", {
        appendPadding: 10,
        data: this.chartData,
        angleField: "value",
        colorField: "type",
        radius: 0.8,
        legend: {
          position: "bottom-right",
          selected: {
            在线设备: true,
            离线设备: true,
          },
          offsetX: -10,
          itemName: {
            style: {
              fill: "white",
            },
          },
        },
        tooltip: {
          formatter: (data) => {
            return { name: data.type, value: data.value + "个" };
          },
        },
        label: {
          type: "outer",
          content: "{name} {percentage}",
          style: {
            fill: "white",
            fontSize: 12,
            fontfamily: "TencentSans",
          },
        },
        interactions: [
          { type: "pie-legend-active" },
          { type: "element-active" },
        ],
      });
      this.chart.update({
        theme: {
          styleSheet: {
            brandColor: "#000",
            paletteQualitative10: [
              "#1AAF8B",
              "#FF4500",
              "#406C85",
              "#F6BD16",
              "#B40F0F",
              "#2FB8FC",
              "#4435FF",
              "#FF5CA2",
              "#BBE800",
              "#FE8A26",
            ],
            paletteQualitative20: [
              "#FF4500",
              "#1AAF8B",
              "#406C85",
              "#F6BD16",
              "#B40F0F",
              "#2FB8FC",
              "#4435FF",
              "#FF5CA2",
              "#BBE800",
              "#FE8A26",
              "#946DFF",
              "#6C3E00",
              "#6193FF",
              "#FF988E",
              "#36BCCB",
              "#004988",
              "#FFCF9D",
              "#CCDC8A",
              "#8D00A1",
              "#1CC25E",
            ],
          },
        },
      });
      this.chart.render();
    },

    findDevicesOnlineNumber() {
      get("/dashboard/queryDeviceOnlineNumber").then((res) => {
        this.onlineNumber = res.data;
        this.initChart();
      });
    },
  },
  mounted() {
    this.findDevicesOnlineNumber();
    setInterval(() => {
      this.findDevicesOnlineNumber();
    }, 6000);
  },
  created() {},
};
</script>
